<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>账号开通服务</title>
    <!-- Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link href="${pageContext.request.contextPath}/hplus/css/plugins/zTree/zTreeStyle/metro.css" rel="stylesheet">
    <style>
        /*web background*/
        .container{
            display:table;
            height:100%;
        }
        .row{
            display: table-cell;
            vertical-align: middle;
        }
        /* centered columns styles */
        .row-centered {
            text-align:center;
        }
        .col-centered {
            display:inline-block;
            float:none;
            text-align:left;
            margin-right:-4px;
        }
        #mydataTable{
            width: 100% !important;
        }

        .ztree li a.curSelectedNode{
            background-color:#BEEBFF;
        }

        .ztree li span.button.noline_close{background-position: -126px -84px;}
        .ztree li span.button.noline_open{background-position: -105px -84px;}

    </style>
</head>

<body>
<div class="container">
    <div class="row row-centered">
        <div class="col-md-8 col-centered">
            <div class="col-md-12" style="padding-top: 10%;">
            <div>
            <h4>账号开通服务</h4>
            </div>
                <div style="padding-top: 20px;">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#a" data-toggle="tab">
                        1.客户信息
                    </a>
                </li>
                <li>
                    <a href="#b" data-toggle="tab">
                        2.菜单范围
                    </a>
                </li>
                <li>
                    <a href="#d" data-toggle="tab">
                        3.账号开通
                    </a>
                </li>
                <li>
                    <a href="#c" data-toggle="tab">
                        CRM权限展示/屏蔽
                    </a>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content" style="padding-top:5px;">
                <div class="tab-pane fade in active" id="a" style="padding-top:5px;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="text-align: right;padding-top:5px;"><span style="color:red;">*</span> 企业名称：</label>
                        <div class="col-sm-10">
                            <input id="companyName" type="text" class="form-control" placeholder="客户企业名称">
                        </div>
                    </div><br/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="text-align: right;padding-top:5px;"><span style="color:red;">*</span> 企业地址：</label>
                        <div class="col-sm-10">
                            <input id="companyAddress" type="text" class="form-control" placeholder="客户企业地址">
                        </div>
                    </div><br/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="text-align: right;padding-top:5px;"><span style="color:red;">*</span> 客户账号：</label>
                        <div class="col-sm-10">
                            <input id="account" maxlength="11"  type="text" class="form-control" placeholder="客户账号(11位手机号，不能重复)">
                        </div>
                    </div>
                    <div class="form-group"  >
                        <label class="col-sm-2 control-label" style="text-align: right;padding-top:5px;"><span style="color:red;">*</span> 用户名称：</label>
                        <div class="col-sm-10">
                            <input id="name" type="text" class="form-control" placeholder="平台用户名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="text-align: right;padding-top:5px;">短信数量：</label>
                        <div class="col-sm-10">
                            <input id="smsNum" type="text" class="form-control" placeholder="初始化短信数量(不填默认为0)">
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="b" style="padding-top:5px;">
                        <div class="col-md-12" style="padding-top:10px;padding-left:0px;">
                            <!-- 引入zTree -->
                            <div style="overflow-x:auto;height:250px;">
                                <ul id="tree" class="ztree" ></ul>
                            </div>
                        </div>
                </div>

                <div class="tab-pane fade" id="d" style="padding-top:10px;">
                    开通前请先检查1、2步数据是否正确：<button type="button" class="btn btn-primary k_verify" onclick="openAccount();">确认开通</button>
                </div>

                <div class="tab-pane fade" id="c" style="padding-top:5px;">
                                <div class="tab-pane fade fade in active" id="mysql">
                                    <div class="tab-pane fade in active" id="home2" style="padding-top: 10px;">
                                        <div class="col-sm-4">
                                        <input id="accountForCid" type="text" class="form-control" placeholder="客户手机号">
                                        </div>
                                        <div class="col-sm-8">
                                            <button type="button" class="btn btn-primary k_verify" onclick="showAndHideCrmMenu(0)">展示CRM权限</button>&nbsp;
                                            <button type="button" class="btn btn-primary k_verify" onclick="showAndHideCrmMenu(1)">屏蔽CRM权限</button>
                                        </div>

                                    </div>
                                </div>

                </div>

                </div>
                    <div class="col-md-12" style="padding-top:10px;padding-left:0px;">
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseThree">
                                        账号开通注意事项 <span style="font-size: 13px;color:red;">(开通账号前请先阅读说明，否则可能导致数据紊乱)</span>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <!-- 接口描述 -->
                                    <div class="col-sm-12" style="padding-left:0;">
                                        <blockquote style="margin-top:5px;">
                                            菜单范围
                                        </blockquote>
                                    </div>

                                    <div class="col-sm-12" style="padding-left:0;">
                                        <p>1. 首次为客户开通账号时，菜单范围直接决定了平台角色管理中的可选范围，类似一个权限包的概念。</p>
                                        <p>2. 如不确定该客户后续是否要拥有某些菜单，请默认勾选，在平台中控制是否屏蔽。否则需开发人员后续在数据库进行手动处理维护，影响效率。</p>
                                    </div>

                                    <div class="col-sm-12" style="padding-left:0;">
                                        <blockquote style="margin-top:10px;">
                                            CRM权限展示/屏蔽
                                        </blockquote>
                                    </div>

                                    <div class="col-sm-12" style="padding-left:0;">
                                        <p>1. CRM菜单不在平台权限中进行维护，账号开通时默认创建CRM隐藏权限。</p>
                                        <p>2. 如无需为客户展示CRM相关权限菜单，可在此处进行屏蔽操作，后续为其展示，可在此处取消屏蔽。</p>
                                    </div>

                                    <div class="col-sm-12" style="padding-left:0;">
                                        <blockquote style="margin-top:10px;">
                                            注意事项
                                        </blockquote>
                                    </div>

                                    <div class="col-sm-12" style="padding-left:0;">
                                        <p>1. 账号开通服务目前仅提供账号的开通以及控制CRM菜单的展示或隐藏。</p>
                                        <p>2. 客户账号一经开通，就无法再次通过web页面进行编辑和调整，需要开发人员手动调整。</p>
                                        <p>3. 请仔细确认录入信息填写无误再进行开通操作，否则需开发人员后续在数据库进行手动处理维护，影响效率。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
            </div>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                短链(<span id="shortUrlEditText"></span>)
                            </h4>
                            <input id = "shortId" type="text" style="display: none;"></input>
                        </div>
                        <div class="modal-body" style="height: 100px;">

                            <div class="form-group">
                                <div class="col-sm-4" style="text-align: right;">
                                <label control-label>长链接：</label>
                                </div>
                                <div class="col-sm-6">
                                    <input id="longUrlEdit" name="" class="form-control" placeholder="" type="text"><span class="help-block m-b-none"></span>
                                </div>
                                <div class="col-sm-2"></div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-4" style="text-align: right;">
                                <label class="control-label" style="padding-top: 5px;"> 缓存过期时间：</label>
                                </div>
                                <div class="col-sm-6" id="data_5">
                                    <div class="input-daterange" id="datepicker">
                                        <input id="expiryTimeEdit" type="text" class="input-sm form-control" name="start" ><span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="col-sm-2"></div>
                            </div>
                        <input id = "expiryTimeEditOld" type="text" style="display: none;"></input>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" onclick="submitChange();">
                                提交更改
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

            </div>
        </div>
    </div>
</div>


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${pageContext.request.contextPath}/hplus/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
<script src="${pageContext.request.contextPath}/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
<script src="${pageContext.request.contextPath}/hplus/js/plugins/zTree/jquery.ztree.all-3.5.min.js"></script>

<script>


    //ajax全局同步、此处功能不需要异步
    $.ajaxSetup({
        async : false
    });

    //判断协议的正则表达式
    var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
    //手机号验证规则
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    var path = "<%=path%>";
    var myDataTable;
    $(function () {
        $("[data-toggle='popover']").popover();
        init();

    });

    $(function () {
        $('#collapseFour').collapse({
        toggle: false
    })});


    //开通账号
    function openAccount(){

        //用户选择的模块权限
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        nodes=treeObj.getCheckedNodes(true);
        var authoritIdList = "";
        for(var i=0;i<nodes.length;i++){
            if(i == 0){
                authoritIdList += nodes[i].id + "&" + nodes[i].name ; //获取选中节点的值
            }else{
                authoritIdList += "," + nodes[i].id + "&" + nodes[i].name ; //获取选中节点的值
            }
        }
        // alert(authoritIdList +"----"+$("#account").val()+"-----"+$("#name").val())+"-----"+$("#companyName").val()+"------"+$("#companyAddress").val();
        // if(!reg.test($("#longUrlpath").val())){
        //     layer.msg('url格式不正确，请加上协议', {icon: 2,offset:'10px'});
        // }else if($("#longUrlpath").val() == ""){
        //     layer.msg('长链接不能为空', {icon: 2,offset:'10px'});
        // }else{

            if($("#account").val() == ""){
                layer.msg('客户账号不能为空', {icon: 2,offset:'10px'});
            }else if(!myreg.test($("#account").val())) {
                layer.msg('客户账号为手机号', {icon: 2,offset:'10px'});
            }else if($("#name").val() == ""){
                layer.msg('用户名称不能为空', {icon: 2,offset:'10px'});
            }else if($("#companyName").val() == ""){
                layer.msg('企业名称不能为空', {icon: 2,offset:'10px'});
            }else if($("#companyAddress").val() == ""){
                layer.msg('企业地址不能为空', {icon: 2,offset:'10px'});
            }else if(authoritIdList == ""){
                layer.msg('菜单范围不能为空', {icon: 2,offset:'10px'});
            }else {
                //判断客户手机号是否存在

                //发送ajax请求，根据长链接获取短链
                var url = "<%=path%>/account/getAccountIfRepeat";
                $.get(url, {
                    "account": $("#account").val()
                }, function (data) {
                    if (data.status == '200') {
                        //发送ajax请求，根据长链接获取短链
                        var url = "<%=path%>/account/initCustomerAccountService";
                        $.get(url, {
                            "account": $("#account").val(),
                            "name": $("#name").val(),
                            "companyName": $("#companyName").val(),
                            "companyAddress": $("#companyAddress").val(),
                            "accessToken": authoritIdList,
                            "smsNum": $("#smsNum").val()
                        }, function (data) {
                            if (data.status == '200') {
                                layer.msg('客户账号创建成功', {icon: 1,offset:'10px'});
                            }
                        });
                    }else {
                        layer.msg('客户账号已存在', {icon: 2,offset:'10px'});
                    }
                });

            }
        // }
    }

    //标记展示或者隐藏crm权限 0，展示1隐藏
    function showAndHideCrmMenu(tag){

        if($("#accountForCid").val() == ""){
            layer.msg('展示/隐藏客户手机号不能为空', {icon: 2,offset:'10px'});
        }else {
            //发送ajax请求，根据长链接获取短链
            var url = "<%=path%>/account/showAndHideCrmMenu";
            $.get(url, {
                "account": $("#accountForCid").val(),
                "isDeleted": tag
            }, function (data) {
                if (data.status == '200') {
                    if (tag == 0) {
                        layer.msg('展示客户' + $("#accountForCid").val() + 'CRM权限成功', {icon: 1, offset: '10px'});
                    } else {
                        layer.msg('隐藏客户' + $("#accountForCid").val() + 'CRM权限成功', {icon: 1, offset: '10px'});
                    }
                }
            });
        }

    }



    //初始化树结构
    function init(){
        //保存所有的菜单节点数据
        var zNodes =[];
        //从数据库查询全部的菜单权限
        var url="<%=path%>/role/ajaxAuthorityAll";
        $.post(url, {
        }, function(data) {
            var realData = data.data;
            if (data.status == 200) {
                for(var i=0;i<realData.length;i++){
                    var treeData = {id:realData[i].authorityId, pId:realData[i].authorityParentCode, name:realData[i].authorityName, open:false};
                    zNodes.push(treeData);
                }
                zTree(zNodes);
            }else{
                errorDialog(data.message);
            }
        });

    }


    //缩短网址回车事件绑定
    // $('#longUrlpath').bind('keypress', function(event) {
    //     if (event.keyCode == "13") {
    //         event.preventDefault();
    //         //回车执行缩短网址
    //         shortUrl();
    //     }
    // });

    /*
chkboxType: { “Y”: “ps”, “N”: “ps” }
Y 属性定义 checkbox 被勾选后的情况；
N 属性定义 checkbox 取消勾选后的情况；
“p” 表示操作会影响父级节点；
“s” 表示操作会影响子级节点。
*/
    //初始化zTree
    function zTree(treeData){
        var ygx = "s";
        var ngx = "s";

        var zTree;
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
                chkboxType: { "Y": ygx, "N": ngx }   //勾选 checkbox 对于父子节点的关联关系
            },
            view: {
                showLine: false,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable:true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: getCurrentNode,
                onClick : zTreeOnClick
            }
        };

        function getCurrentNode(treeId, treeNode) {
            //curNode = treeNode;
        }

        //点击左侧的菜单树，动态展示右侧
        function zTreeOnClick(){
            //此处编写需要完成的业务逻辑代码，实现你想要的 主内容的框架进行页面跳转
            /*  keyWord = "";
                  $("#bmName_tz").text(curNode.name);
                  $("#bmid_tz").text(curNode.id);
                  $("#bmcurd").show();
               initUser(); */
        }

        //初始化树
        var t = $("#tree");
        t = $.fn.zTree.init(t, setting, treeData);

        // //根据角色id拿到该角色对应的全部权限，用于回显
         var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.checkAllNodes(true);
        // for(var i=0;i<treeData.length;i++){
        //     var node = zTree.getNodeByParam("id",treeData[i].id);
        //     zTree.checkNode(node, true, true);
        // }
    }


</script>
</body>
</html>